/**
 * 库设置的侧导
 */

import React from 'react';
import exceed from 'utils/apimap';
import { Link } from 'utils/router';
import { Nav, Tag } from '@teamix/ui';
import utils from 'utils';
import track from 'utils/track';
import { getFeature } from 'utils/features';
import TagForFeature from 'components/tagForFeature';
import intl from '../../../../../../../locale';

const { pathResource } = window.FORCE;

export default class projectSettingsNav extends React.Component {
  constructor(props) {
    super(props);
    const hasClickService = utils.getCachedData('service-setting');
    const hasClickLfs = utils.getCachedData('lfs');
    const hasClickMirror = utils.getCachedData('mirror-setting');
    this.state = {
      hasClickService,
      hasClickLfs,
      mirrorSyncSettings: {},
      hasClickMirror,
    };
  }

  componentDidMount() {
    exceed
      .fetch({
        api: 'project.mirror.settings',
        params: {
          projectId: pathResource.id,
        },
      })
      .then((result) => {
        this.setState({
          mirrorSyncSettings: result,
        });
      });
  }

  onItemClick = () => {
    if (!this.props.isBranchCompleted) {
      this.props.updateBranchStatus &&
        this.props.updateBranchStatus({
          isBranchCompleted: true,
        });
    }
  };

  onCacheClick = (key, stateKey) => {
    utils.setCachedData(key, 'clicked');
    this.setState({
      [stateKey]: true,
    });

    if (key === 'lfs') {
      track({
        action: 'view_lfs',
        page: 'Repo-Settings-LFS',
        type: '',
        control: '',
      });
    }
  };

  render() {
    const { isBranchCompleted, defaultActiveKey } = this.props;
    const {
      hasClickService,
      hasClickLfs,
      hasClickMirror,
      mirrorSyncSettings: { support_mirror_sync },
    } = this.state;

    return (
      <Nav
        type="normal"
        direction="ver"
        triggerType="click"
        defaultSelectedKeys={defaultActiveKey}
        className="project-setting-nav"
        // selectedKeys={defaultActiveKey}
        // onSelect={onChange}
        {...this.props}
      >
        {getFeature('page_enable.project.setting') && (
          <Nav.Item key="settings">
            <Link to={`/${pathResource.fullPath}/settings`}>
              {intl.get({
                id: 'code-assets.containers.projectSettingsTab.BasicSettings',
                defaultMessage: '基本设置',
              })}
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.branches') && (
          <Nav.Item key="branches">
            <Link to={`/${pathResource.fullPath}/settings/branches`} onClick={this.onItemClick}>
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.BranchSettings',
                  defaultMessage: '分支设置',
                })}

                {!isBranchCompleted ? (
                  <span style={{ float: 'right', position: 'relative', top: -2 }}>
                    <Tag style={{ margin: 0 }}>
                      {intl.get({
                        id: 'code-assets.containers.projectSettingsTab.Unfinished',
                        defaultMessage: '未完成',
                      })}
                    </Tag>
                  </span>
                ) : null}
              </div>
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.push_rules') && (
          <Nav.Item key="push_rules">
            <Link to={`/${pathResource.fullPath}/settings/push_rules`}>
              {intl.get({
                id: 'code-assets.containers.projectSettingsTab.PushRuleSettings',
                defaultMessage: '推送规则设置',
              })}
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.merge_requests') && (
          <Nav.Item key="merge_requests">
            <Link to={`/${pathResource.fullPath}/settings/merge_requests`}>
              {getFeature('project.setting.merge_setting.text')}
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.webhooks') && (
          <Nav.Item key="webhooks">
            <Link to={`/${pathResource.fullPath}/settings/webhooks`}>{'Webhooks'}</Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.deploykeys') && (
          <Nav.Item key="deploykeys">
            <Link to={`/${pathResource.fullPath}/settings/deploykeys`}>
              {intl.get({
                id: 'code-assets.containers.projectSettingsTab.DeploymentKey',
                defaultMessage: '部署密钥',
              })}
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.services') && (
          <Nav.Item key="services">
            <Link
              to={`/${pathResource.fullPath}/settings/services`}
              onClick={() => {
                this.onCacheClick('service-setting', 'hasClickService');
              }}
            >
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.IntegrationAndService',
                  defaultMessage: '集成与服务',
                })}

                {!hasClickService && (
                  <span style={{ position: 'relative', top: -1 }}>
                    <Tag type="primary" size="small" style={{ marginLeft: 8 }}>
                      NEW
                    </Tag>
                  </span>
                )}
              </div>
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.lfs') && (
          <Nav.Item key="lfs">
            <Link
              to={`/${pathResource.fullPath}/settings/lfs`}
              onClick={() => {
                this.onCacheClick('lfs', 'hasClickLfs');
              }}
            >
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.LargeFileStorage',
                  defaultMessage: '大文件存储',
                })}

                {!hasClickLfs && (
                  <span style={{ position: 'relative', top: -1 }}>
                    <Tag type="primary" size="small" style={{ marginLeft: 8 }}>
                      NEW
                    </Tag>
                  </span>
                )}
              </div>
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.back_up') && (
          <Nav.Item key="back_up">
            <Link to={`/${pathResource.fullPath}/settings/back_up`} style={{ display: 'block' }}>
              {intl.get({
                id: 'code-assets.containers.projectSettingsTab.VaultBackup',
                defaultMessage: '仓库备份',
              })}
              <TagForFeature
                type="primary"
                size="small"
                style={{ marginLeft: 8 }}
                tagText="BETA"
              />
            </Link>
          </Nav.Item>
        )}
        {getFeature('page_enable.project.setting.mirror_sync') && support_mirror_sync && (
          <Nav.Item key="mirror_sync">
            <Link
              to={`/${pathResource.fullPath}/settings/mirror_sync`}
              onClick={() => {
                this.onCacheClick('mirror-setting', 'hasClickMirror');
              }}
            >
              <div>
                {intl.get({
                  id: 'code-assets.projectSettings.containers.nav.WarehouseSynchronization',
                  defaultMessage: '仓库同步',
                })}{' '}
                {!hasClickMirror && (
                  <span style={{ float: 'right', position: 'relative', top: -2 }}>
                    <Tag type="primary" size="small" style={{ marginLeft: 8 }}>
                      NEW
                    </Tag>
                  </span>
                )}
              </div>
            </Link>
          </Nav.Item>
        )}
      </Nav>
    );
  }
}
